<template>
  <!--   -->
  <div @click="tapHandle">
    <unicon v-if="name" :fill="iconFill" :name="name" :width="width" :height="height" :icon-style="iconStyle" />
  </div>

</template>

<script lang="ts" setup>
import { defineProps, withDefaults, defineEmits, computed } from "vue";
// @ts-ignore
import useSettingstore from "@/store/setting";
// @ts-ignore
import themesList from "@/themes/index.ts";
let settingstore = useSettingstore()
const emit = defineEmits<{
  (e: 'click'): void
}>()
interface iconType {
  name?: string;
  width?: number;
  height?: number;
  hoverFill?: string,
  fill?: string,
  iconStyle?: string, //line / monochrome
  themeFill?: Map<string, string>
}
const props = withDefaults(defineProps<iconType>(), {
  width: 20,
  height: 20,
  hoverFill: '',
  fill: "",
  iconStyle: undefined
})


const iconFill = computed<string>((): string => {
  if (props.fill) {
    return props.fill
  }
  let themeFillCustom = props.themeFill?.get(settingstore.theme.englishName)
  if (themeFillCustom !== '' && themeFillCustom !== undefined && themeFillCustom !== null) {
    return themeFillCustom
  }
  let themeFind = themesList.find((item: any) => {
    return item.englishName == settingstore.theme.englishName
  })
  if (themeFind) {
    return themeFind.icon_color
  }
  return "royalblue"
})
function tapHandle() {
  emit('click')
}
</script>
